import React from 'react';
import { Link } from 'react-router-dom';
import { Eye, ShoppingCart, Star, Phone } from 'lucide-react';
import { Button } from 'antd';
import { Card } from '../ui';
import { Product } from '../../types';
import { formatPrice } from '../../utils';

interface ProductCardProps {
  product: Product;
  onContact?: (product: Product) => void;
  showActions?: boolean;
  variant?: 'default' | 'compact' | 'featured';
  className?: string;
  onViewDetails?: () => void;
}

export type { ProductCardProps };

export const ProductCard: React.FC<ProductCardProps> = ({
  product,
  onContact,
  showActions = true,
  variant = 'default',
  className,
  onViewDetails
}) => {
  const displayPrice = product.price 
    ? product.price
    : '价格面议';

  const cardVariant = variant === 'featured' ? 'feature' : variant === 'compact' ? 'default' : 'interactive';

  return (
    <Card 
      variant={cardVariant}
      className={`group relative overflow-hidden transition-smooth hover-lift ${
        variant === 'featured' ? 'border-2 border-primary-200 shadow-lg' : ''
      } ${className || ''}`}
      hoverable
    >
      {/* 产品图片 - 响应式优化 */}
      <div className="relative mb-3 sm:mb-4 overflow-hidden rounded-lg">
        <img
          src={product.images?.[0] || '/placeholder-product.jpg'}
          alt={product.name}
          className="w-full h-32 xs:h-36 sm:h-40 md:h-48 lg:h-52 object-cover transition-transform duration-300 group-hover:scale-105"
        />
        
        {/* 推荐标签 - 响应式优化 */}
        {product.featured && (
          <div className="absolute top-2 right-2 sm:top-3 sm:right-3">
            <span className="px-2 py-1 sm:px-3 sm:py-1 bg-gradient-to-r from-accent-500 to-accent-600 text-white text-xs font-medium rounded-full shadow-lg backdrop-blur-sm">
              推荐
            </span>
          </div>
        )}
        
        {/* 悬停操作按钮 - 桌面端显示 */}
        {showActions && (
          <div className="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 transition-all duration-300 flex items-center justify-center opacity-0 group-hover:opacity-100 hidden md:flex">
            <div className="flex space-x-3">
              <Button
                type="primary"
                size="small"
                className="shadow-lg backdrop-blur-sm"
                onClick={onViewDetails || (() => window.location.href = `/products/${product.id}`)}
              >
                <Eye className="w-4 h-4 mr-1" />
                查看详情
              </Button>
              {onContact && (
                <Button
                  type="default"
                  size="small"
                  className="shadow-lg backdrop-blur-sm"
                  onClick={() => onContact(product)}
                >
                  <Phone className="w-4 h-4 mr-1" />
                  联系我们
                </Button>
              )}
            </div>
          </div>
        )}
      </div>
      
      {/* 产品信息 - 响应式优化 */}
      <div className="space-y-2 sm:space-y-3">
        <div>
          <h3 className="text-sm sm:text-base lg:text-lg font-semibold text-gray-900 group-hover:text-primary-600 transition-colors line-clamp-1">
            <Link to={`/products/${product.id}`} className="hover:text-primary-600">
              {product.name}
            </Link>
          </h3>
          <p className="text-xs sm:text-sm text-gray-500 mt-1">
            {product.categoryId || product.type}
          </p>
        </div>
        
        <p className="text-xs sm:text-sm text-gray-600 line-clamp-2 leading-relaxed hidden sm:block">
          {product.description}
        </p>
        
        {/* 产品特性 - 响应式优化 */}
        {product.features && product.features.length > 0 && (
          <div className="flex flex-wrap gap-1 sm:gap-2">
            {product.features.slice(0, variant === 'compact' ? 2 : 3).map((feature, index) => (
              <span
                key={index}
                className="px-1.5 py-0.5 sm:px-2 sm:py-1 bg-gray-100 hover:bg-gray-200 text-gray-600 text-xs rounded-md transition-colors"
              >
                {feature}
              </span>
            ))}
            {product.features.length > (variant === 'compact' ? 2 : 3) && (
              <span className="px-1.5 py-0.5 sm:px-2 sm:py-1 bg-primary-50 text-primary-600 text-xs rounded-md font-medium">
                +{product.features.length - (variant === 'compact' ? 2 : 3)}
              </span>
            )}
          </div>
        )}
        
        {/* 价格和状态 - 响应式优化 */}
        <div className="flex items-center justify-between pt-2 sm:pt-3 border-t border-gray-100">
          <span className="text-base sm:text-lg font-bold text-primary-600">
            {displayPrice}
          </span>
          
          <div className="flex items-center space-x-1 sm:space-x-2">
            {product.status === 'draft' && (
              <span className="px-1.5 py-0.5 sm:px-2 sm:py-1 bg-gray-100 text-gray-600 text-xs rounded-full">
                草稿
              </span>
            )}
            
            {variant !== 'compact' && !showActions && (
              <Link to={`/products/${product.id}`}>
                <Button type="default" size="small">
                  <span className="hidden sm:inline">查看详情</span>
                  <span className="sm:hidden">详情</span>
                </Button>
              </Link>
            )}
          </div>
        </div>
        
        {/* 移动端显示操作按钮 - 响应式优化 */}
        {showActions && (
          <div className="flex space-x-2 w-full md:hidden pt-2">
            <Button 
              type="default" 
              size="small"
              className="flex-1 text-xs"
              onClick={onViewDetails || (() => window.location.href = `/products/${product.id}`)}
            >
              <Eye className="w-3 h-3 sm:w-4 sm:h-4 mr-1" />
              详情
            </Button>
            {onContact && (
              <Button 
                type="primary" 
                size="small"
                className="flex-1 text-xs"
                onClick={() => onContact(product)}
              >
                <Phone className="w-3 h-3 sm:w-4 sm:h-4 mr-1" />
                咨询
              </Button>
            )}
          </div>
        )}
      </div>
    </Card>
  );
};

export default ProductCard;